<!DOCTYPE html>
<html>

<head>
  <title>Events</title>
</head>

<body onload="msg5()">
  <script type="text/javascript">
    function msg0() {
      alert("click message");
    }

    function msg1() {
      alert("mouse over message");
    }

    function msg2() {
      alert("mouse out message");
    }

    function msg3() {
      document.getElementById("input1").style.background = "red";
    }

    function msg4() {
      document.getElementById("input1").style.background = "green";
    }

    function msg5() {
      document.getElementById("bg").style.background = "black";
      document.getElementById("bg").style.color = "white";
    }

  </script>
  <input type="button" onclick="msg0()" value="Click0" />
  <p style="border: 1px solid black; width: 200px;" onmouseover="msg1()" onmouseout="msg2()">Hello Coding Man</p>
  <input type="text" id="input1" onfocus="msg3()" onblur="msg4()" /><br />

  <div id="bg">Hello Coding Man</div>

  <input type="button" id="input2" value="Click1" />

  <script type="text/javascript">
    document.getElementById("input2").addEventListener("click", msg0);
  </script>

  <script type="text/javascript">
//  window.onload = function(){
//       document.getElementById("bg").style.background="black";  
//       document.getElementById("bg").style.color="white";  
//     }
  </script>
</body>

</html>